<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>堡庆网络支付demo</title>

    <style>
       .cf{clear:both;}.cf:after{zoom:1;} .fl{float:left;}
        .logDiv{width: 100%;height: 100%;}
        #myform{position: absolute;top:50%;right: 50%;width: 900px;height: 600px;margin-top:-300px;margin-right: -450px;}
        .lgD{clear: both;width: 100%;float:left;margin-bottom: 10px;}
        .lgD:after{zoom:1;}
        .formName{float: left;width: 20%;height:40px;margin-right:40px;line-height:40px;font-size:18px;color:#666;text-align: right;}
        .formInputBox{float: left;width:75%;}
        .inputBox{width:400px;height: 40px;font-size:16px;padding:0 10px;border:1px solid #CCC;}
        #orderClick{display: block;width: 110px;height: 40px;margin:5px;line-height: 40px;font-size:12px;text-align:center;color:#FFF;background: #999;border-radius: 5px;}
        .radioBox{margin-top: 10px;}
        #pay_btn{display: block;width: 150px;height: 40px;margin:0 350px;line-height: 40px;text-align:center;font-size:18px;font-weight:bold;background: #CCC;color: #FFF;border-radius: 10px;text-decoration: none;}
        .logC{float: left;width: 100%;height: 50px;margin-top:60px;}

        
        #qrcode{position:absolute;width: 250px;height: 250px;right:200px;top:50%;margin-top:-100px;background: #F4F4F4;}


    </style>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.qrcode.min.js"></script>

</head>

<body>

<div class="logDiv">
    <div class="logGet">
        <!-- 头部提示信息 -->
        <!-- 输入框 -->
        <form class="cf" id="myform">
        <div class="lgD">
            <div class="formName">商户号</div>
            <div class="formInputBox">
                <input class="inputBox" type="text" placeholder="输入商户号" name="account" value="ZB1520821677" />
            </div>
        </div>
         <div class="lgD">
            <div class="formName">订单号</div>
            <div class="formInputBox">
                <input class="inputBox" type="text" placeholder="输入订单号" name="resqn" id="resqn" value="" />
                <a id="orderClick">重新生成订单号</a>
            </div>
            
        </div>
         <div class="lgD">
            <div class="formName">订单金额</div>
            <input class="inputBox" type="text" placeholder="输入订单金额" name="pay_amount" value="0.01" />
        </div>
        <div class="lgD">
            <div class="formName">支付方式</div>
            <div class="formInputBox radioBox">
                <input type="radio" value="W01" name="paytype" checked > 微信
                <input type="radio" value="A01" name="paytype"> 支付宝
            </div>
        </div>
        <div class="lgD">
            <div class="formName">接口</div>
            <div class="formInputBox radioBox">
                <input type="radio" value="1" name="class" checked > 接口一
                <input type="radio" value="2" name="class"> 接口二
            </div>
        </div>
        <div class="lgD">
            <div class="formName">是否验签</div>
            <div class="formInputBox radioBox">
                <input type="radio" value="1" name="is_key" checked > 是
                <input type="radio" value="2" name="is_key"> 否
            </div>
            
        </div>
        <div class="lgD">
            <div class="formName">IP</div>
            <div class="formInputBox">
                <input class="inputBox type="text" placeholder="输入IP" name="pay_ip" value="127.0.0.1" />
            </div>
            
        </div>
        <div class="lgD">
            <div class="formName">商品名称</div>
             <div class="formInputBox">
                <input class="inputBox type="text" placeholder="商品名称" name="body" value="playercash" />
             </div>
            
        </div>
        <div class="lgD">
            <div class="formName">回调地址</div>
            <div class="formInputBox">
                <input class="inputBox type="text" placeholder="回调地址" id=notify_url name="notify_url" value="http://119.23.34.87/callback.php?s=/NotifyceshiPF/notify" />
            </div>
            
        </div>
        <div class="logC">
            <a href="javascript:void(0)" id="pay_btn">提 交</a>
        </div>
        
    </form>
     
    <div id="qrcode"></div>
       

    </div>
</div>
<!-- 登录body  end -->

<script>
	$("#pay_btn").on('click',function(){
        var resqn = $("#resqn").val();
        var notify_url = $("#notify_url").val();
        if(!resqn){
            alert("订单号为空");
            return false;
        }
        if(!notify_url){
            alert("回调地址为空");
            return false;
        }
		$.ajax({
			type:'post',
			url:"index.php",
			data:$("#myform").serialize(),
			dataType:'json',
			success:function(data){
                $('#qrcode').qrcode(data.payinfo);
			}
		})
	});

    $("#orderClick").on('click',function(){
    
        $("#qrcode").html('');
        $.ajax({
            type:'get',
            url:"order.php",
            data:{},
            dataType:'json',
            success:function(data){
                document.getElementById('resqn').value=data.resqn;
            }
        })
    })
</script>
</body>
</html>